<extend name="Layout/index" />
<block name="breadcrumb-01">
	<li class="active">分类管理</li>
</block>

<block name="breadcrumb-02">
	<h1>
		分类管理
		<small>
			<i class="icon-double-angle-right"></i>
			 分类树列表
		</small>
	</h1>
</block>
<block name='main'>
	<div class="widget-box">
	<div class="widget-header header-color-blue2">
		<h4 class="lighter smaller">Choose Categories</h4>
	</div>

	<div class="widget-body">
		<div class="widget-main padding-8">
			<div id="tree1" class="tree"></div>
		</div>
	</div>
</div>



<!--[if !IE]> -->

<script type="text/javascript">
	window.jQuery || document.write("<script src='__PUBLIC__/assets/js/jquery-2.0.3.min.js'>"+"<"+"/script>");
</script>

<!-- <![endif]-->

<!--[if IE]>
<script type="text/javascript">
window.jQuery || document.write("<script src='__PUBLIC__/assets/js/jquery-1.10.2.min.js'>"+"<"+"/script>");
</script>
<![endif]-->

<script type="text/javascript">
	if("ontouchend" in document) document.write("<script src='__PUBLIC__/assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
</script>
<script src="__PUBLIC__/assets/js/bootstrap.min.js"></script>
<script src="__PUBLIC__/assets/js/typeahead-bs2.min.js"></script>

<!-- page specific plugin scripts -->

<script src="__PUBLIC__/assets/js/fuelux/data/fuelux.tree-sampledata.js"></script>
<script src="__PUBLIC__/assets/js/fuelux/fuelux.tree.min.js"></script>

<!-- ace scripts -->

<script src="__PUBLIC__/assets/js/ace-elements.min.js"></script>
<script src="__PUBLIC__/assets/js/ace.min.js"></script>
<script type="text/javascript">







	jQuery(function($){


		var tree_data_list = {};
		//tree_data_list['1'] = {name: '很牛逼', type: 'folder'}
		<volist name="list" id="vo">
			tree_data_list['<{$vo.id}>'] = {name: '<{$vo.name}>', type: <notempty name="vo.child">"folder"<else />"item"</notempty>};	
			
			<notempty name="vo.child">
				var child = {};
				<volist name="vo.child" id="item1">
					child['<{$item1.id}>'] = {name: '<{$item1.name}>', type:<notempty name="item1.child">"folder"<else />"item"</notempty>};
					<notempty name="item1.child">
						var child2 = {};
						<volist name="item1.child" id="item2">
							child2['<{$item2.id}>'] = {name: '<{$item2.name}>', type:<notempty name="item2.child">"folder"<else />"item"</notempty>};
							
						</volist>
						child['<{$item1.id}>']['additionalParameters'] = {'children': child2};
					</notempty>

				</volist>
				tree_data_list['<{$vo.id}>']['additionalParameters'] = {'children': child};
			</notempty>
		
		</volist>

		var treeDataSource = new DataSourceTree({data: tree_data_list});


		$('#tree1').ace_tree({
			dataSource: treeDataSource ,
			multiSelect:true,
			loadingHTML:'<div class="tree-loading"><i class="icon-refresh icon-spin blue"></i></div>',
			'open-icon' : 'icon-minus',
			'close-icon' : 'icon-plus',
			'selectable' : false,
			'selected-icon' : 'icon-ok',
			//'unselected-icon' : 'icon-remove'
			'unselected-icon' : 'icon-spin'
		});

		$('#tree2').ace_tree({
			dataSource: treeDataSource2 ,
			loadingHTML:'<div class="tree-loading"><i class="icon-refresh icon-spin blue"></i></div>',
			'open-icon' : 'icon-folder-open',
			'close-icon' : 'icon-folder-close',
			'selectable' : false,
			'selected-icon' : null,
			'unselected-icon' : null
		});

	});
</script>
</block>